<template>
    <div class="content">
        <div id="gdMapCon"></div>
    <el-button type="primary">Primary</el-button>
    </div>
</template>
 

<script setup>
import AMapLoader from "@amap/amap-jsapi-loader";
import { onMounted, onUnmounted } from "vue";

let map = null;

window._AMapSecurityConfig = {
    securityJsCode: "8b0cafe237d097e9bdb35cce397e294d",
};
onMounted(() => {
    AMapLoader.load({
        key: "561b1714c178acc3126a7c97cf293195",
        version: "2.0",
        plugins: [],
    })
        .then((AMap) => {
            map = new AMap.Map("gdMapCon", {
                // 设置地图容器id
                viewMode: "2D", // 是否为3D地图模式
                zoom: 14, // 初始化地图级别
                center: [116.39, 39.66], // 初始化地图中心点位置
                mapStyle: "amap://styles/dark",
            });


            var district = null;
            var polygon;
            function drawBounds () {
                //加载行政区划插件
                // if (!district) {
                //实例化DistrictSearch
                var opts = {
                    subdistrict: 0, //获取边界不需要返回下级行政区
                    extensions: "all", //返回行政区边界坐标组等具体信息
                    level: "district", //查询行政级别为 市
                };
                district = new AMap.DistrictSearch(opts);

                // }
                //行政区查询
                district.search("北京市", (status, result) => {
                    var bounds = result.districtList[0].boundaries;
                    if (bounds) {
                        //生成行政区划polygon
                        for (var i = 0; i < bounds.length; i += 1) {
                            //构造MultiPolygon的path
                            bounds[i] = [bounds[i]];
                        }
                        polygon = new AMap.Polygon({
                            strokeWeight: 2, // 定义轮廓的粗细
                            path: bounds,
                            fillOpacity: 0.1, // 遮罩层透明度
                            fillColor: "", // 遮罩层颜色，没有代表不覆盖颜色
                            strokeColor: "#fff", // 轮廓颜色，因为底色是黑色所以我为了凸显效果用的白色
                        });
                        map.add(polygon);
                        map.setFitView(polygon); //视口自适应
                    }
                });
            }

            drawBounds();

            // 我们先来定义几个要出现图标的点，这个你也是可以通过接口区去拿到，然后放进去，我这个是案例久
            var lnglats = [
                [116.39, 39.92],
                [116.41, 39.93],
                [116.43, 39.91],
                [117.07, 36.66],
            ];
            var markers = []; //存放覆盖物的数组

            for (var i = 0; i < lnglats.length; i++) {
                // 这就是去遍历需要添加覆盖物图片的数组，让他的每一项上面加一个图片，只需要用到他的坐标点，和你要加的图片，都可以随意变换
                var lnglat = lnglats[i];
                var marker = new AMap.Marker({
                    position: new AMap.LngLat(lnglat[0], lnglat[1]),
                    icon: require("../assets/img.png"),
                });

                markers.push(marker);
            }

            // 创建覆盖物群组，并将 marker 传给 OverlayGroup
            var overlayGroups = new AMap.OverlayGroup(markers);

            // 添加覆盖物群组
            function addOverlayGroup () {
                map.add(overlayGroups);
            }
            addOverlayGroup(); //覆盖物出现了。


        })
        .catch((e) => {
            console.log(e);
        });
});


onUnmounted(() => {
    map?.destroy();
});
</script>

<style scoped>
#gdMapCon {
    width: 1000px;
    height: 800px;
}
#container {
    width: 100wh;
    height: 93vh;
}
</style>
